<template>
	<l-layout class="l-tab-page">
    <l-panel>
			<template #title>
				<el-radio-group v-model="labelPosition" size="small">
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
        </el-radio-group>
			</template>
      <div style="width: 480px;margin: auto;padding-top: 32px; " >
				<el-form ref="form" :label-position="labelPosition" size="mini" :model="form" label-width="80px">
					<el-form-item label="账号">
						<el-input v-model="form.name" placeholder="请输入账户"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input v-model="form.password" type="password" show-password placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item label="出生日期">
						<el-col :span="11">
							<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;">
							</el-date-picker>
						</el-col>
					</el-form-item>
					<el-form-item label="性别">
						<el-col :span="11">
							<el-select v-model="form.sex" placeholder="请选择性别">
								<el-option label="男" value="shanghai"></el-option>
								<el-option label="女" value="beijing"></el-option>
							</el-select>
						</el-col>
					</el-form-item>
					<el-form-item label="数字">
						<el-slider v-model="form.num" show-input :step="10" show-stops></el-slider>
					</el-form-item>
					<el-form-item label="会员充值">
						<el-switch v-model="form.push" active-text="按月付费" inactive-text="按年付费"></el-switch>
					</el-form-item>
					<el-form-item label="关注内容">
						<el-checkbox-group v-model="form.type">
							<el-checkbox label="美食" name="type"></el-checkbox>
							<el-checkbox label="新闻" name="type"></el-checkbox>
							<el-checkbox label="综艺" name="type"></el-checkbox>
							<el-checkbox label="汽车" name="type"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="账号类别">
						<el-radio-group v-model="form.resource">
							<el-radio label="公司"></el-radio>
							<el-radio label="个人"></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="个人介绍">
						<el-input type="textarea" v-model="form.desc" placeholder="请填写个人简介" maxlength="100"
							show-word-limit></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">立即创建</el-button>
						<el-button>取消</el-button>
					</el-form-item>
				</el-form>
			</div>
		</l-panel>
	</l-layout>
</template>

<script>
export default {
	data() {
		return {
			labelPosition: 'right', // 方向
			form: {
				name: '',
				password: '',
				sex: '',
				num: 1,
				date: '',
				push: false,
				type: [],
				resource: '',
				desc: ''
			}
		}
	},
	methods: {
		onSubmit() {
			console.log('submit!');
		}
	}
}
</script>
